@import "_zero_style";

* {
  font-family: "PT Sans", sans-serif;
  color: white;
}
@import "_header";
@import "_footer";
@import "_popup";


%formElem {
  display: flex;
  height: 74px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
%cardVector {
  position: absolute;
  background-image: url('data:image/svg+xml,<svg width="246" height="2" viewBox="0 0 246 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path id="Vector 12" opacity="0.5" d="M0 1L246 1.00002" stroke="%23595959" stroke-width="2" stroke-dasharray="2 4"/></svg>');
  bottom: 57%;
}

html,
body {
  height: 100%;
}

body {
  background-color: #000;
}
body.lock {
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.main {
  flex-grow: 1;
  background: rgb(0, 0, 0);
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 1) 48%,
      rgba(48, 48, 48, 0.8) 100%
    )
    no-repeat;
  .main__background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%; /* Need a specific value to work */
    filter: grayscale(100%);
    z-index: -1;
  }

  // * Приветствие
  .main__greeting {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
    text-align: center;
    .greeting__logo {
      grid-area: logo;
      .logo-img {
        margin-top: 64px;
      }
    }
    .greeting__labels {
      margin-top: 64px;
      display: flex;
      justify-content: space-around;
    }
    .label-block {
      width: 277px;
    }
    .label-title {
      color: #fff;
      text-align: center;
      font-family: "PT Sans Narrow";
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: 110%; /* 35.2px */
      text-transform: uppercase;
    }
    .label-img {
      padding: 16px 0;
    }
    .label-paragraph {
      text-align: center;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 24px */
    }
  }

  // * Блок_1
  .main-block-title {
    color: var(--basic-extra-dark, #242424);
    font-family: "PT Sans Narrow";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 35.2px */
    text-transform: uppercase;
    padding-bottom: 28px;
  }

  .main__servises {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
    height: 409px;
    margin-top: 58px;
    background-color: #fff;
    color: black;
    display: grid;
    grid-template-columns: repeat(2, 50%);

    // * Услуги Блок_1.1
    .servises__popular-servises {
      margin: 40px;

      .list__card {
        display: flex;
        justify-content: space-between;
        padding-bottom: 22px;
        position: relative;

        p {
          color: black;
          display: block;
          font-family: "PT Sans Narrow";
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: 140%; /* 28px */
          text-transform: uppercase;
        }
        .card__price {
          color: #af7842;
        }
        .vector-1 {
          @extend %cardVector;
          left: 177px;
          height: 2px;
          width: 165px;
        }
        .vector-2 {
          @extend %cardVector;
          left: 124px;
          height: 2px;
          width: 210px;
        }
        .vector-3 {
          @extend %cardVector;
          left: 78px;
          height: 2px;
          width: 262px;
        }
        .vector-4 {
          @extend %cardVector;
          left: 200px;
          height: 2px;
          width: 130px;
        }
      }
      .popular-servises__check-all-btn {
        display: flex;
        height: 44px;
        padding: 14px 20px;
        align-items: start;
        gap: 8px;
        flex-shrink: 0;
        background: var(--basic-black, #000);
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 16px */
        text-transform: uppercase;
        margin-top: 10px;
        transition: all 0.2s;
      }
      .popular-servises__check-all-btn:hover {
        background-color: #814b18;
        transition: all 0.2s;
      }
      .popular-servises__check-all-btn:focus {
        background-color: #814b18;
        box-shadow: 0px 0px 0px 2px #dbb590;
        transition: all 0.2s;
      }
      .popular-servises__check-all-btn:disabled {
        background-color: #595959;
        color: rgba(231, 231, 231, 1);
        transition: all 0.2s;
      }
			.popular-servises__check-all-btn:disabled:hover {
        background-color: #595959;
      }
    }

    // * Галерея Блок_1.2
    .servises__gallery {
      display: inline;
      margin: 40px;
      z-index: 0;
      .swiper-container {
        width: 400px;
        overflow: hidden;
        position: relative;
      }
      .swiper-wrapper {
      }
      .swiper-slide {
      }
      .gallery__img {
        max-width: 390px;
        margin-bottom: 36px;
      }
      .swiper-button-prev {
      }
      .swiper-button-next {
      }
      .my-pagination {
      }
    }
  }

  // * Блок_2
  .main__information {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
    height: 431px;
    margin-top: 31px;
    background-color: #fff;
    color: black;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    margin-bottom: 61px;

    // * Контакты Блок_2.1
    .information__contacts {
      margin: 40px;
      .contacts__subtitle {
        color: var(--special-neutral, #af7842);
        font-family: "PT Sans Narrow";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 28px */
        text-transform: uppercase;
      }
    }
    .contacts__block-1 {
      display: flex;
      width: 350px;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding-bottom: 22px;
      .contacts__title {
        padding-bottom: 24px;
      }
      .contacts__info {
        color: #242424;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
      }
      .contacts__phone-number {
        color:#242424;
        font-family: "PT Sans Narrow";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 28.8px */
        text-decoration-line: underline;
        text-transform: uppercase;
      }
    }
    .contacts__block-2 {
      .contacts__time-of-working {
        color: var(--basic-extra-dark, #242424);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
      }
      .block-2__btns {
        display: flex;
        justify-content: space-between;
        align-items: end;
      }
      .contacts__route {
        display: inline-flex;
        height: 44px;
        padding: 14px 20px;
        align-items: flex-start;
        gap: 8px;
        flex-shrink: 0;
        margin-top: 21px;
        background-color: black;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 16px */
        text-transform: uppercase;
      }

      .contacts__feedback {
        height: 44px;
        padding: 14px 20px;
        align-items: flex-start;
        gap: 8px;
        background-color: white;
        color: var(--basic-extra-dark, #242424);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 16px */
        text-transform: uppercase;
				transition: all 0.2s;
      }
			.contacts__feedback:disabled {
				background-color: rgba(89, 89, 89, 1);
				transition: all 0.2s;
			}
			.contacts__feedback:disabled:hover {
				background-color: rgba(89, 89, 89, 1);
			}
			.contacts__feedback:hover {
				background-color: rgba(219, 181, 144, 1);
				transition: all 0.2s;
			}
			.contacts__feedback:focus {
				background-color: rgba(219, 181, 144, 1);
				transition: all 0.2s;
				box-shadow: 0px 0px 0px 2px rgba(129, 75, 24, 1) ;
			}
    }

    // * Записаться Блок_2.2
    .information__appointment {
      margin: 40px;
    }
    .appointment__paragraph {
      color: var(--basic-dark, #595959);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%; /* 19.6px */
      padding-bottom: 24px;
    }

    .appointment__form {
      .full-form__label {
        position: relative;
        display: flex;
        height: 22px;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        cursor: pointer;
      }
      .full-form__input {
        font-size: 15px;
        border: 2px solid var(--spcial-light, #000000);
        color: var(--basic-neutral, #000000);
        padding: 10px 10px;
        width: 100%;
        text-align: center;
        transition: all 0.5s;
      }
      .full-form__input:hover {
        border: 2px solid rgba(175, 120, 66, 1);
        transition: all 0.2s;
      }
      .full-form__input:focus {
        border: 2px solid rgba(175, 120, 66, 1);
				box-shadow: 0px 0px 0px 2px rgba(219, 181, 144, 1);
        transition: all 0.2s;
      }
			.full-form__input:disabled {
				background-color: rgba(231, 231, 231, 1);
        border: 2px solid rgba(89, 89, 89, 1);
        transition: all 0.2s;
      }
			.full-form__input:disabled:hover {
				background-color: rgba(231, 231, 231, 1);
        border: 2px solid rgba(89, 89, 89, 1);
      }
      .full-form__input.error {
        border: 2px solid var(--status-error, #ea5454);
        transition: all 0.2s;
      }
			.full-form__input.error:focus {
        border: 2px solid var(--status-error, #ea5454);
        transition: all 0.2s;
				box-shadow: 0px 0px 0px 2px rgba(219, 181, 144, 1);
      }
      .full-form__input.error:hover {
        border: 2px solid var(--special-light, #dbb590);
        transition: all 0.2s;
      }
			
      .label__text {
        color: var(--basic-extra-dark, #242424);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 22.4px */
        text-transform: uppercase;
        cursor: text;
      }
      .label__img-div {
        position: relative;
        cursor: pointer;
        height: 16px;
        width: 16px;
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="info"><path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM9.27273 5.27273C9.27273 5.97564 8.70291 6.54545 8 6.54545C7.29709 6.54545 6.72727 5.97564 6.72727 5.27273C6.72727 4.56982 7.29709 4 8 4C8.70291 4 9.27273 4.56982 9.27273 5.27273ZM9.27273 7.5V11H6.72727V7.5H9.27273Z" fill="%23242424"/></g></svg>');
      }
      .label__img-div:hover {
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="info"><path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM9.27273 5.27273C9.27273 5.97564 8.70291 6.54545 8 6.54545C7.29709 6.54545 6.72727 5.97564 6.72727 5.27273C6.72727 4.56982 7.29709 4 8 4C8.70291 4 9.27273 4.56982 9.27273 5.27273ZM9.27273 7.5V11H6.72727V7.5H9.27273Z" fill="%23AF7842"/></g></svg>');
      }
      .label__img-div::after {
        position: absolute;
        content: "Укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони";
        display: none;
        width: 0;
        height: 0;
      }
      .label__img-div:hover::after {
        padding: 5px;
        border: 8px solid black;
        border-radius: 8px;
        text-transform: none;
        content: "Укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони";
        width: 220px;
        height: auto;
        background-color: #000;
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 16.8px */
        display: block;
        left: 0;
        top: -80px;
      }
      .top-form {
        width: 100%;
        display: inline-flex;
        align-items: flex-start;
        gap: 17px;
      }
      .full-form__date {
        @extend %formElem;
        width: 114px;
      }

      .full-form__time {
        @extend %formElem;
        width: 74px;
      }
      .full-form__phone {
        @extend %formElem;
        width: 179px;
      }
      .bottom-form {
        margin-top: 7px;
      }
      .full-form__name {
        @extend %formElem;
        width: 390px;
      }
      .full-form__subscribe {
        display: inline-flex;
        height: 44px;
        padding: 14px 20px;
        align-items: flex-start;
        gap: 8px;
        flex-shrink: 0;
        margin-top: 21px;
        background-color: black;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 16px */
        text-transform: uppercase;
      }
    }
    .main-btn-type-1 {
      transition: all 0.2s;
    }
    .main-btn-type-1:disabled {
      background-color: rgba(89, 89, 89, 1);
      transition: all 0.2s;
    }
    .main-btn-type-1:disabled:hover {
      background-color: rgba(89, 89, 89, 1);
    }
    .main-btn-type-1:hover {
      background-color: rgba(129, 75, 24, 1);
      transition: all 0.2s;
    }
    .main-btn-type-1:focus {
      background-color: rgba(129, 75, 24, 1);
      transition: all 0.2s;
      box-shadow: 0px 0px 0px 2px rgba(219, 181, 144, 1);
    }
  }
}

@import "_shop";
@import "_about-us";
@import "_questions";